<template>
  <div style="margin-top: 30px">
<!--    {{user}}-->
    <div style="display: flex;text-align: center;font-weight: bold;font-size: 30px">
      <div  style="width: 45%;height:50px;border:0px solid;margin-left: 30px">
        <span>时间排行榜</span>
      </div>
      <div  style="width: 45%;height:50px;border:0px solid;margin-left: 30px">
        <span>个人时间统计</span>
      </div>
    </div>
    <div style="display: flex">
      <div id="left" style="width: 45%;height:500px;border:1px solid;margin-left: 30px"></div>
      <div id="right" style="width: 45%;height:500px;border:1px solid;margin-left: 30px"></div>
    </div>

  </div>
</template>
<script>
import * as echarts from 'echarts';
import request from "@/utils/request";
let myChart;
let myChart2;

export default {
  name: 'StatView',
  components: {},
  data() {
    return {
      hideZero:{
        formatter: function (params) {
          if (params.value > 0) {
            return params.value;
          } else {
            return '';
          }
        }
      },
      user: {},
      date: new Date(),
      option1 : {
        color:[
          '#5470c6', '#91cc75', '#fac858', '#ee6666',
          '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
          '#D0FA58','#01DFD7', '#ea7ccc', '#B40404',
          '#585858', '#F7819F',
        ],
        tooltip: {trigger: 'axis'},
        legend: {data: ['james', '0241', 'erxat', 'guliman', 'elxat']},
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        toolbox: {feature: {saveAsImage: {}}},
        xAxis: {type: 'category',
          axisLabel: {
            interval: 0, // 强制显示所有标签
          },
          boundaryGap: false, data: ['2.06', '2.07', '2.08', '209', '2-06', '随便', '你好','2-09周六', '2-06周日', '随便', '你好']},
        yAxis: {type: 'value'},
        series: [
          { name: 'james', type: 'line', stack: 'Total', data: [12, 2, 4, 6, 7, 16, 2, 6, 7, 16, 2]},
          { name: '0241', type: 'line', stack: 'Total', data: [3, 5, 8, 6, 2, 3, 4, 6, 7, 16, 2]},
          { name: 'erxat', type: 'line', stack: 'Total', data: [4, 12, 2, 14, 10, 8, 9, 6, 7, 16, 2]},
          { name: 'guliman', type: 'line', stack: 'Total', data: [4, 5, 4, 6, 8, 7, 6, 6, 7, 16, 2]},
          { name: 'elxat', type: 'line', stack: 'Total', data: [12, 2, 0, 6, 2, 14, 8, 6, 7, 16, 2]}
        ]
      },
      option2 : {
        color:[
          '#5470c6', '#91cc75', '#fac858', '#ee6666',
          '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
          '#D0FA58','#01DFD7', '#ea7ccc', '#B40404',
          '#585858', '#F7819F',
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'}
        },
        legend: {},
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        xAxis: {type: 'value'},
        yAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Fri', 'Sat', 'Sun']},
        series: [
          { name: '其他', type: 'bar', stack: 'total', label: {show: true,},
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          { name: 'Mail Ad', type: 'bar', stack: 'total', label: {show: true},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          { name: 'Affiliate Ad', type: 'bar', stack: 'total', label: {show: true},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          { name: 'Video Ad', type: 'bar', stack: 'total', label: {show: true},
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: '总计', type: 'bar', stack: 'total', label: {show: true},
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
    }
  },
  created() {
    let userStr = sessionStorage.getItem("user") || "{}"
    let user = JSON.parse(userStr)
    this.user = user;

  },
  unmounted() {
    myChart.dispose();
    myChart2.dispose();
  },
  mounted() {
    //请求后端接口,数据准备好
    request.get("/stat/rankList").then(res =>{
      console.log(res)
      this.option1.legend.data  = res.data.allAliveUser
      this.option1.xAxis.data = res.data.lastTenDays
      this.option1.series = res.data.arr

      let chartDom = document.getElementById('left');
      myChart = echarts.init(chartDom);
      this.option1 && myChart.setOption(this.option1);
      console.log("@@@",this.option1)
    })

    //请求后端接口,数据准备好
    request.get("/stat/"+this.user.username).then(res =>{
      console.log(res)
      this.option2.legend.data  = res.data.allAliveType
      this.option2.yAxis.data = res.data.lastTenDays
      this.option2.series = res.data.arr

      //遍历this.option2.series
      for(let i=0;i<this.option2.series.length;i++){
        this.option2.series[i].label = Object.assign(this.option2.series[i].label,this.hideZero);
      }

      let chartDom2 = document.getElementById('right');
      myChart2 = echarts.init(chartDom2);
      this.option2 && myChart2.setOption(this.option2);
    })
  }
}
</script>
